<template>
  <div class="school_infs">
    <Card>
      <p slot="title">
        <Icon type="navicon-round"></Icon>
        进出记录
      </p>
      <Row type="flex" justify="space-between">
        <div>
          幼儿：
          <Input v-model="searchparam.studentName" placeholder="幼儿姓名关键字" @on-change="queryFn"
                 style="width: 100px;margin-right: 4px;"/> 班级：

          <Select v-model="searchparam.clazzId" @on-change="queryFn" style="width:150px">
            <Option v-for="item in clazzList" :value="item.id" :key="item.id">{{item.gradeName}}-{{ item.name }}
            </Option>
          </Select>
          <div class="db_inline">
            状态：
            <Select v-model="searchparam.status" @on-change="queryFn" style="width:120px">
              <Option v-for="item in statusList" :value="item.id" :key="item.id">{{ item.name }}
              </Option>
            </Select>
            日期：
            <DatePicker type="date" v-model="searchparam.day" placeholder="时间" @on-change="searchparam.day=$event"
                        style="width: 130px"></DatePicker>
          </div>
          <span @click="queryFn">
              			<Button type="info"><Icon type="search"></Icon>搜索</Button>
        			</span>
          <span @click="restFn">
              			<Button type="ghost"><Icon type="refresh"></Icon>刷新</Button>
        			</span>
        </div>
      </Row>
      <Row class="margin-top-10">
        <Table :height='tableHeight' ref="backgroundTable" :columns="dataColumns" :data="dataTable"></Table>
      </Row>
      <Row type="flex" justify="end" class="footer">
        <div class="margin-top-10">
          <Page :total="searchparam.total" :current="searchparam.current" :page-size="searchparam.size"
                @on-change="pageChange" show-elevator></Page>
        </div>
      </Row>
    </Card>

    <Modal v-model="details.visible" :title="details.title" width="450">
      <div style="line-height: 30px;font-size: 16px">
        <div>
          <Row>
            <div><strong>学生名称：</strong>{{details.list.studentName}}</div>
            <div><strong>班级名称：</strong>{{details.list.clazzName}}</div>
            <div><strong>日期：</strong>{{details.list.day}}</div>
            <div v-if="type===1">上午：</div>
            <div><strong>进园时间：</strong>{{details.list.inTime}}</div>
            <div v-if="details.list.sendPerson"><strong>进园家长：</strong>{{details.list.sendPerson}}</div>
            <div><strong>出园时间：</strong>{{details.list.outTime}}</div>
            <div v-if="details.list.outPerson"><strong>出园家长：</strong>{{details.list.outPerson}}</div>
            <div v-if="type===1">
              下午：
                <div><strong>进园时间：</strong>{{details.list.afterInTime}}</div>
                <div v-if="details.list.afterInPerson"><strong>进园家长：</strong>{{details.list.afterInPerson}}</div>
                <div><strong>出园时间：</strong>{{details.list.afterOutTime}}</div>
                <div v-if="details.list.afterOutPerson"><strong>出园家长：</strong>{{details.list.afterOutPerson}}</div>
            </div>
          </Row>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
  import API from "@/api/api";
  import VmBtable from "@/components/vm/vm-btable";
  import vueUpload from "@/components/views/upload/Upload";
  import Cookie from "js-cookie"

  export default {
    name: "Background",
    components: {
      VmBtable,
      vueUpload,
    },
    data() {
      return {
        cutHeight: 280,
        tableHeight: 640,
        type: 0,
        details: {
          title: '',
          visible: false,
          list: []
        },
        searchTitle: '',
        loginType: Cookie.getJSON('loginType'),
        clazzList: [],
        statusList: [
          {id: '已入园', name: '已入园'},
          {id: '未入园', name: '未入园'},
          {id: '已离园', name: '已离园'},
        ],
        searchparam: {
          current: 1,
          size: 20,
          studentName: '',
          status: '',
          clazzId: '',
          day: '',
        },
        dataColumns: [{
          type: 'index',
          title: '序号',
          align: 'center',
          minWidth: 60
        },
          {
            title: '班级名称',
            key: 'clazzName',
            minWidth: 150,
            align: 'center',
          },
          {
            title: '宝贝名',
            key: 'studentName',
            minWidth: 120,
            align: 'center'
          },
          {
            title: '日期',
            key: 'day',
            minWidth: 150,
            align: 'center',
          },
          {
            title: '状态',
            key: 'status',
            minWidth: 150,
            align: 'center',
            sortable: true,
            sortType: 'asc',
          },
          {
            title: '操作',
            align: 'center',
            minWidth: 160,
            render: (h, params) => {
              let btn = [];
              let detailBtn = h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.detailFn(params.row)
                  }
                }
              }, '详情');
              btn.push(detailBtn);
              return h('div', btn);
            }
          }
        ],
        dataTable: [],
      }
    },
    methods: {
      dayChange(day) {
        this.searchparam.day = day;
        this.queryFn();
      },
      queryFn() {
        API.fetchPickDeliver(this.searchparam).then(resp => {
          this.dataTable = resp.data.records;
          this.searchparam.total = resp.data.total;
          this.searchparam.current = resp.data.current;
        })
      },
      pageChange(val) {
        this.searchparam.current = val;
        this.queryFn();
      },
      restFn() {
        this.searchparam.current = 1;
        this.searchparam.studentName = '';
        this.searchparam.status = '';
        this.searchparam.clazzId = '';
        this.searchparam.day = '';
        this.queryFn();
      },
      fetchKindergartenType() {
        API.fetchKindergartenType().then(resp => {
          this.type = resp.data;
        })
      },
      detailFn(data) {
        this.details.visible = true;
        Object.assign(this.details, {
          visible: true,
          title: '接送情况',
          list: data
        })
      },
      cancelFn() {
      },
      complete() {
      },
      submitFn() {
      },
      fetchKindergartenClazz() {
        API.fetchKindergartenClazz().then(resp => {
          this.clazzList = resp.data;
        })
      },
      setHeight() {
        this.tableHeight = window.innerHeight - this.$refs.backgroundTable.$el.offsetTop - this.cutHeight;
      }
    },
    mounted() {
      this.fetchKindergartenType();
      this.queryFn();
      this.setHeight();
      this.fetchKindergartenClazz();
    }
  }
</script>

<style scoped>

</style>
